<template>
  <!--  这里应该是 -->
  <div class="dashboard-container">
    <el-button size="mini" @click="goBack">返回</el-button>
    <el-button size="mini" @click="openSensorListDrawer">设备列表</el-button>
    <el-button size="mini" @click="saveViewSensors">保存修改</el-button>
    <div class="bgc scroll">
      <v-stage :config="configKonva">
        <v-layer>
          <v-image :config="configImage" @click="clickHandler" />
        </v-layer>

        <v-layer ref="layer">
          <v-group v-for="(item,index) in layers" :key="index">
            <v-rect :config="item.rect" />
            <v-text :config="item.text" />
          </v-group>
        </v-layer>
      </v-stage>
    </div>

    <el-drawer
      title="设备列表"
      :visible.sync="openTable"
      direction="rtl"
      size="30%"
    >
      <el-table :data="tableData">
        <el-table-column property="id" label="ID" width="150" />
        <el-table-column property="name" label="名称" width="150" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status===0" size="mini" @click="handleSelectSensor(scope.$index, scope.row)">选择</el-button>
            <el-button v-if="scope.row.status===1" size="mini" @click="handleRemoveSensor(scope.$index, scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>

import { sensor_in_view, view_info, view_mark, view_sensors } from '@/api/plan_view'

export default {
  name: 'ViewAnnotation',
  data: function() {
    return {
      allowMark: false,
      openTable: false,
      currentSensor: {},
      configKonva: {
        width: 800,
        height: 600
      },
      configImage: {
        x: 0,
        y: 0,
        image: null,
        width: 800,
        height: 600,
        zIndex: 9
      },
      tableData: [],
      page: '',
      page_size: '10',
      total: 0,
      viewSensors: [],
      layers: []
    }
  },
  computed: {
  },
  created() {
    this.getViewInfo()

    this.getSensorList()

    // 请求该view下的传感器信息
    this.getViewSensors()

    // 对比两个list 将已经添加过的，加一个属性， 同时页面显示"移除"
  },
  mounted() {
    this.$nextTick(() => {

    })
  },
  methods: {
    getViewInfo: function() {
      view_info(this.$route.query.view_id).then(res => {
        if (res.code === 200) {
          const image = new window.Image()
          image.src = process.env.VUE_APP_BASE_API + res.data.path
          image.onload = () => {
            this.configImage.image = image
            this.configImage.width = image.width
            this.configImage.height = image.height

            this.configKonva.width = image.width
            this.configKonva.height = image.height
          }
        }
      })
    },
    openSensorListDrawer() {
      this.openTable = true
    },
    getSensorList() {
      // 获取所有传感器列表
      sensor_in_view(this.$route.query.project_id, this.$route.query.view_id).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.list
          this.page = res.data.page
          this.page_size = res.data.page_size
          this.total = res.data.total
        }
      })
    },

    handleSelectSensor(index, item) {
      this.allowMark = true
      this.currentSensor = item
      this.openTable = false
    },
    handleRemoveSensor(index, item) {
      this.tableData[index].status = 0
      this.layers = this.layers.filter(layer => layer.sensor_id !== item.id)
      this.viewSensors = this.viewSensors.filter(viewSensor => viewSensor.sensor_id !== item.id)
    },
    clickHandler(event) {
      if (this.allowMark) {
        const layerX = event.evt.layerX
        const layerY = event.evt.layerY
        // 保存坐标和传感器信息

        // 维护一个数组
        this.viewSensors.push({
          sensor_id: this.currentSensor.id,
          sensor_name: this.currentSensor.name,
          x: layerX,
          y: layerY
        })

        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].id === this.currentSensor.id) {
            this.tableData[i].status = 1
          }
        }

        const text = this.currentSensor.name
        this.layers.push({
          sensor_id: this.currentSensor.id,
          text: { fontSize: 20, x: layerX, y: layerY, text: this.currentSensor.name, fill: '#ccc' },
          rect: { x: layerX - 10, y: layerY - 10, width: text.length * 20 * 0.6 + 20, height: 40, fill: 'green', stroke: 'black', strokeWidth: 1, cornerRadius: 2 }
        })

        this.allowMark = false
      }
    },
    getViewSensors() {
      view_sensors(this.$route.query.view_id).then(res => {
        if (res.code === 200) {
          for (let i = 0; i < res.data.length; i++) {
            this.layers.push({
              sensor_id: res.data[i].sensor_id,
              text: { fontSize: 20, x: res.data[i].x, y: res.data[i].y, text: res.data[i].sensor_name, fill: '#ccc' },
              rect: { x: res.data[i].x - 10, y: res.data[i].y - 10, width: res.data[i].sensor_name.length * 20 * 0.6 + 20, height: 40, fill: 'green', stroke: 'black', strokeWidth: 1, cornerRadius: 2 }
            })
          }
        }
      })
    },
    goBack() {
      this.$router.back()
    },
    saveViewSensors() {
      view_mark(this.$route.query.view_id, this.viewSensors).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          setTimeout(() => {
            this.$router.push({
              path: 'viewManagement',
              query: { project_id: this.$route.query.project_id }
            })
          }, 1500)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
 .scroll{
   width: 100%;
   height: calc(100vh - 128px);
   overflow: auto;
 }
</style>
